<template>
  <div class="meeting-room-management">
    <!-- 顶部通知栏 -->
    <el-card class="header-card">
      <div class="header-content">
        <h1>后勤管理部 郭经理 预定2025年1月3日 14:30到15:30 (使用会议室C举行XX会议 已成功)</h1>
      </div>
    </el-card>



    <!-- 中间统计信息卡片 -->
    <div class="dashboard-container">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-card class="stat-card" shadow="always">
            <div class="stat-item">
              <el-icon><office-building /></el-icon>
              <div class="stat-value">10</div>
              <div class="stat-label">会议室总数</div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="stat-card" shadow="always">
            <div class="stat-item">
              <el-icon><user /></el-icon>
              <div class="stat-value">5</div>
              <div class="stat-label">当前会议室使用数</div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="stat-card" shadow="always">
            <div class="stat-item">
              <el-icon><calendar /></el-icon>
              <div class="stat-value">5</div>
              <div class="stat-label">今天空闲会议室数</div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="stat-card" shadow="always">
            <div class="stat-item">
              <el-icon><document /></el-icon>
              <div class="stat-value">355</div>
              <div class="stat-label">今天发送会议通知数</div>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <!-- 底部会议时间表 -->
           <!-- 视图模式切换 -->
    <div class="view-mode">
      <el-button @click="changeViewMode('day')">日</el-button>
      <el-button @click="changeViewMode('week')">周</el-button>
      <el-button @click="changeViewMode('month')">月</el-button>
    </div>
      <el-card class="meeting-schedule" shadow="always">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="日期">
            <el-date-picker v-model="date" type="date" placeholder="选择日期" />
          </el-form-item>
          <el-form-item label="会议室">
            <el-input v-model="room" placeholder="会议室" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-form>

        <!-- 日视图 -->
        <div v-if="viewMode === 'day'">
          <el-table :data="dayTableData" border style="width: 100%">
            <el-table-column prop="room" label="会议室" width="180" />
            <el-table-column v-for="hour in hours" :key="hour" :prop="hour" :label="hour" />
          </el-table>
        </div>

        <!-- 周视图 -->
        <div v-if="viewMode === 'week'">
          <el-table :data="weekTableData" border style="width: 100%">
            <el-table-column prop="room" label="会议室" width="180" />
            <el-table-column v-for="day in weekDays" :key="day" :prop="day" :label="day" />
          </el-table>
        </div>

        <!-- 月视图 -->
        <div v-if="viewMode === 'month'">
          <el-table :data="monthTableData" border style="width: 100%">
            <el-table-column prop="week" label="周" width="180" />
            <el-table-column v-for="day in monthDays" :key="day" :prop="day" :label="day" />
          </el-table>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import {
  OfficeBuilding,
  User,
  Calendar,
  Document
} from '@element-plus/icons-vue';

const date = ref('');
const room = ref('');
const viewMode = ref('day'); // 默认视图模式为日

// 模拟数据
const dayTableData = ref([
  {
    room: '会议室A',
    '08:00': '',
    '09:00': '',
    '10:00': '9:30-11:00 IT部李经理',
    // ... 其他时间段数据
  },
  // 其他会议室数据
]);

const weekTableData = ref([
  {
    room: '会议室A',
    '周一': '9:30-11:00 IT部李经理',
    '周二': '',
    '周三': '',
    '周四': '',
    '周五': '',
    '周六': '',
    '周日': ''
  },
  // 其他会议室数据
]);

const monthTableData = ref([
  {
    week: '第1周',
    '1日': '',
    '2日': '',
    '3日': '9:30-11:00 IT部李经理',
    // ... 其他日期数据
  },
  // 其他周数据
]);

const hours = computed(() => {
  const result = [];
  for (let i = 8; i <= 23; i++) {
    result.push(`${i < 10 ? '0' : ''}${i}:00`);
  }
  return result;
});

const weekDays = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
const monthDays = ['1日', '2日', '3日', '4日', '5日', '6日', '7日', '8日', '9日', '10日', '11日', '12日', '13日', '14日', '15日', '16日', '17日', '18日', '19日', '20日', '21日', '22日', '23日', '24日', '25日', '26日', '27日', '28日', '29日', '30日', '31日'];

const changeViewMode = (mode) => {
  viewMode.value = mode;
};

const onSubmit = () => {
  console.log('submit!');
};

const resetForm = () => {
  date.value = '';
  room.value = '';
};
</script>

<style scoped>
.meeting-room-management {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.header-card {
  margin-bottom: 20px;
}

.header-content h1 {
  margin: 0;
  font-size: 18px;
  color: #333;
}

.dashboard-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.stat-card {
  text-align: center;
  padding: 20px;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  margin-top: 10px;
  color: #409EFF;
}

.stat-label {
  margin-top: 10px;
  color: #666;
}

.meeting-schedule {
  margin-top: 10px;
}

.demo-form-inline {
  margin-bottom: 20px;
}

.view-mode {
  margin-bottom: 5px;
}
</style>